<template>
  <div class="home">
    <!--导航栏-->
    <div class="home_view">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="#006633"
        text-color="#fff"
        :router="true"
        active-text-color="#ffd04b"
        @select="navPath"
        @open="handleOpen"
        @close="handleClose">
        <el-submenu v-for="(item,index) in navlist" :key="index" :index="index+''">
          <template slot="title">
            <div class="fsc">
              <i :class="item.icon"></i>
              <div>{{item.titles}}</div>
            </div>
            
          </template>
          <el-menu-item-group>
            <el-menu-item @click="navItem(item.titles, nav.title)" v-for="(nav,index) in item.children" :key="index" :index="nav.path">{{nav.title}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <!--title-->
    <div class="home_title fsc">
      <div class="home_title_o c_white b">
        <p>作客乡村</p>
        <p class="mg_t10">黔东南旅游指南</p>
      </div>
      <div class="home_i fbc fgrow3">
        <i class="icon iconfont i_memu icon-weibiaoti15"></i>
        <p>
          <i class="el-icon-search i_serch"></i>
          <i class="el-icon-bell i_bell"></i>
          <i class="icon iconfont icon-geren i_geren"></i>
        </p>
      </div>
    </div>
     <!--面包屑-->
     <div class="home_arrow pd_l20 fcs column">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>{{breadcrumb.father}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{breadcrumb.son}}</el-breadcrumb-item>
        </el-breadcrumb>
        <p class="f_16 b mg_t20">{{breadcrumb.son}}</p>
      </div>
    <router-view v-if="isRouter" class='home_views'></router-view>
  </div>
</template>
<script>
// @ is an alias to /src
export default {
   data() {
     return {
        isRouter: 'true',
        breadcrumb: {
          father: '',
          son: '',
        },
        arrow1: '',
        arrow2: '',
        navlist: [
          { icon:'el-icon-menu', titles:'数据中心', children: [
            { title:'数据分析', path:'/core/analysis'},
            { title:'文章数据', path:'/core/articledata'},
            { title:'历史数据', path:'/core/historical'},
          ]},
          { icon:'el-icon-location', titles:'文章管理', children: [
            { title:'文章列表', path:'/article/list' },
            { title:'测试发布文章', path:'/article/testarticle' },
            { title:'文章审核', path:'/article/manage' },
            { title:'文章置顶管理', path:'/article/roof' },
          ]},
          { icon:'el-icon-location', titles:'用户管理', children: [
            { title:'用户列表', path:'/user/list' },
            { title:'游客评分', path:'/user/score' },
          ]},
          { icon:'el-icon-location', titles:'指南管理', children: [
            { title:'乡村推荐', path:'/guide/scenic' },
            { title:'乡宿推荐', path:'/guide/stay' },
            { title:'乡味推荐', path:'/guide/flavor' },
            { title:'推荐标准', path:'/guide/standard' },
          ]},
          { icon:'el-icon-location', titles:'线路管理', children: [
            { title:'线路列表', path:'/line/list' },
          ]},
          { icon:'el-icon-location', titles:'消息管理', children: [
            { title:'消息列表', path:'/news/list' },
          ]},
          { icon:'el-icon-menu', titles:'广告管理', children: [
            { title:'轮播广告管理', path:'/advert/carousel' },
            { title:'文章广告管理', path:'/advert/article' },
          ]},
          { icon:'el-icon-location', titles:'旅说管理', children: [
            { title:'旅说列表', path:'/say/list' },
          ]},
          { icon:'el-icon-location', titles:'投诉管理', children: [
            { title:'投诉列表', path:'/complaint/list' },
          ]},
          { icon:'el-icon-location', titles:'权限管理', children: [
            { title:'角色授权', path:'/power/role' },
            { title:'账号管理', path:'/power/account' },
          ]},
          { icon:'el-icon-location', titles:'投稿管理', children: [
            { title:'投稿导文', path:'/set/a' },
          ]},
          { icon:'el-icon-location', titles:'合作管理', children: [
            { title:'合作导文', path:'/set/b' },
          ]},
          { icon:'el-icon-location', titles:'关于我们', children: [
            { title:'公司介绍', path:'/set/c' },
            { title:'共建做客', path:'/set/d' },
          ]},
          
        ],
     }
   },
   
   created() {
     this.addBreadcrumb();
   },
   methods: {
     handleOpen(key, keyPath) {
        // console.log(key, keyPath);
        
     },
     handleClose(key, keyPath) {   //添加面包屑
        // console.log(key, keyPath);
        
     },
     navPath(index,path) {
        // console.log(index,path)
       if(index=='/set/a'||index=='/set/b'||index=='/set/c') {
          // window.location.reload();

       }
     },
     navItem(father, son) {
       console.log(father,son)
       this.breadcrumb.father = father;
       this.breadcrumb.son = son;
       sessionStorage.setItem('father', father);
       sessionStorage.setItem('son', son);
      
     },
     addBreadcrumb() {   //判断面包屑内容
       if(sessionStorage.getItem('father')) {
         this.breadcrumb.father = sessionStorage.getItem('father');
         this.breadcrumb.son = sessionStorage.getItem('son');
       }else {
         this.breadcrumb.father = '用户管理';
         this.breadcrumb.son = '文章列表';
       }
     }
      
   },
}
</script>
<style scoped lang="less">
  @import url(../assets/iconfont/iconfont.css);
  .home_view {
    overflow: scroll;
    background-color: #006633;
    margin-top: 80px;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 200px;
    height: 100%;
  }
  .home_view::-webkit-scrollbar {
    display: none;
  }
  .home_views {
    margin-left: 220px;
    margin-top: 200px;
  }
  .home_title {
    background-color: #fff;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 80px;
    .home_title_o {
      box-sizing: border-box;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      width: 200px;
      height: 100%;
      background-color: #003333;
    }
  }
  .home_i {
    padding: 0 20px;

    .i_memu {
    color: #169BD5;
    font-size: 32px;
    }
    .i_serch {
      font-size: 28px;
      margin-left: 20px;
    }
    .i_bell {
      font-size: 28px;
      margin-left: 20px;
    }
    .i_geren {
      font-size: 28px;
      color: #169BD5;
      margin-left: 20px;
    }
  }
 .el-submenu {
   width: 200px; 
 }

 .home_arrow {
   border-top: 5px solid #f2f2f2;
   border-bottom: 2px solid #f2f2f2;
   background-color: #fff;
   width: 100%;
   position: fixed;
   z-index: 10;
   top: 80px;
   left: 200px;
   height: 80px;
 }
  .el-menu-vertical-demo {
    padding-bottom: 100px;
    width: 200px;
  }
</style>

